html,body{
    margin: 0;
    padding: 0;
}
body{
    font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    background: #eee;
    color:#333;
}
ul,li{
    cursor:default;
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
header{
    position: relative;
    display: block;
    height: 35px;
    z-index: 1;
}
section{
    position: relative;
    width: 100%;
}
.right-popup {
    position: absolute;
}
.green{
    color:#5cb85c;
}
.ul-horizon {

}
.ul-horizon li {
    display: inline;
}
.bg-green{
    background: #5cb85c;
}

header a {
    text-decoration: none;
    color: #eee;
}

header a:hover {
    color: #fff;
}

header .nav{
    background: #5cb85c;
    float: left;
    width: 100%;
    color: white;
    padding: .3em 0 .3em 0;
    height:2em;
}
header .nav ul{
    padding: 0;
    line-height:2em;
    margin: 0 1.5em;
}

header .nav ul li {
    list-style: none;
    float: left;
    cursor: pointer;
    padding: 0 .7em 0 0;
}

footer {
    position:relative;
    background: #5cb85c;
}

footer p{
    margin: 0;
}

.content{
    margin-left: 3em;
    float: left;
    margin-top: .7em
}

.elements{
    position: absolute;
    /*top: 2.5em;*/
    /*left: 0.5em;*/
    cursor: default;
    min-height: 10em;
    margin:.2em;
    z-index: 1;
}
.elements ul {
    margin: 0;
    padding: 0;
}
.elements ul li{
    padding: .5em;
    border-bottom: 1px solid white;
    text-align: center;
}
.elements ul li a{
    margin: 0 auto;
    font-size: 2em;
    color:#5cb85c;
}

section .elements ul li a:hover{
    color:#ccc;
}
.right-top-abs{
    right: 0;
    top: 0;
}
.left-bottom-abs{
    left:0;
    bottom:1em;
}
.left-top-abs{
    left:0;
    top:0;
}
.dock {
    background: none repeat scroll 0 0 #f5f5f5;
    color:#999;
    border-bottom-left-radius: 3px;
    border-color: #aaa;
    border-style: solid;
    border-width: 0 0 1px 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 1;
}
.dock ul{
    text-align: center;
}
.dock ul li {
    padding: .5em;
}
.dock ul li:hover {
    color: #ccc;
}
.dock-header {
    background:repeat scroll 0 0 #5c5c5c;
    border-bottom: 1px solid #000;
    border-top: 1px solid #646464;
    min-height: .3em;
    padding: .4em;
    color:#EEE;
}

section .right-dock ul{
    width: 2em;
}
section .right-dock ul li {
    margin: 0 auto;
    font-size: 1.5em;
    background: #eee;
    text-align: center;
}

section .right-dock ul li a{

}
.popup{
    min-width:200px;
    min-height: 400px;
    background: #f1f1f1;
    position: absolute;
    border:1px solid #ccc;
    box-shadow: -1px 1px 3px #ccc;
}
.popup h4{
    padding: 0 0.5em;
}
.popup p{
    padding: 0 0.5em;
}
.popup label{
    padding: 0 0.5em 0 0;
}
.popup input.short{
    width:3em;
}

.focus{
    border:3px solid #99ff66;
    box-shadow: none;
}
.elements-right:hover{
    border:2px solid #99ff66;
    box-shadow: none;
}

.add{
    display: inline-block;
    cursor: pointer;
    padding: 0 .3em
    background: #5cb85c;
    color: white;
    margin-left: 10px;
}
canvas {
    background: #fff;
}
/* id */
#designer_viewport {
    /*margin-top: 1.4em;*/
    position: relative;
}
#designer_layout {
    width: 100%;
    background: url("../images/canvas_bg.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    overflow: scroll;
    position: relative;
    z-index: 0;
}

#details {
    right:17px;
    color:#555;
}
#right_popup{
    top:1.1em;
    right:2.1em;
}